<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="../Scripts_oo/Break.js"></script>
<script type="text/javascript" src="../Scripts_oo/Utilities.js"></script>
<script type="text/javascript" src="../Scripts_oo/Settings.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/Settings.css" />
<title>Settings</title>
</head>

<body>
	<div id="settings-container">
		<div id="row">

			<div id="navigation-pane" style="left: 0px;">
				<h1 id="settings-title">Settings</h1>
				<ul id="navbar">
					<li id="micro_BreakSettings" class="navigation-pane-item"
						pageID="micro_BreakSettingsPage" tabindex="0">Micro Break</li>
					<li id="macro_BreakSettings" class="navigation-pane-item"
						pageID="macro_BreakSettingsPage" tabindex="1">Macro Break</li>
					<li id="other_OptionsSettings" class="navigation-pane-item"
						pageID="other_OptionsSettingsPage" tabindex="2">Other Options</li>
				</ul>
			</div>

			<div id="settings-pane">
				<div id="settings-pane-block">
					<div id="micro_BreakSettingsPage" class="page">
						<h1 i18n-content="browserPage">Micro Break Settings</h1>

						<section id="micro_timerSettingsSection">
							<h3 i18n-content="micro_TimerSettingsSectionHeading">Timer</h3>
							<div>
								<span id="micro_BreakDurationText">Interval Duration in seconds</span> 
									<input id="micro_BreakDurationRange" spanID="micro_BreakDurationRangeValue" type="range" min="5" max="120" value="20" step="5">
									</input> 
									<span id="micro_BreakDurationRangeValue">20</span>
							</div>
							<div>
								<span id="micro_IntervalFrequencyText">Interval Frequency in minutes</span> 
								<input id="micro_BreakFrequencyRange" spanID="micro_BreakFrequencyRangeValue" type="range" min="5" max="20" value="10" step="1"></input> 
								<span id="micro_BreakFrequencyRangeValue">10</span>
							</div>

							<!-- <h3 i18n-content="micro_AppearanceSettingsSectionHeading">Appearance</h3>
							<div class="checkbox">
								<div>
									<label> <input id="coloredBackgroundEnabled"
										type="checkbox"> <span
										i18n-content="coloredBackgroundEnabled">Display a
											colored background in the notification</span> </label>
								</div>
								<div>
									<label> <input id="flashingBackgroundEnabled"
										type="checkbox"> <span
										i18n-content="flashingBackgroundEnabled">Flash the
											background in the notification</span> </label>
								</div>
							</div> -->
						</section>

					</div>
					<div id="macro_BreakSettingsPage" class="page hidden">
						<h1 i18n-content="browserPage">Macro Break Settings</h1>
						
							<section id="macro_timerSettingsSection">
								<h3 i18n-content="macro_TimerSettingsSectionHeading">Timer</h3>
								<div>
									<span id="macro_BreakDurationText">Interval Duration in seconds</span> 
										<input id="macro_BreakDurationRange" spanID="macro_BreakDurationRangeValue" type="range" min="180" max="600" value="300" step="30">
										</input> 
										<span id="macro_BreakDurationRangeValue">300</span>
								</div>
								<div>
									<span id="macro_IntervalFrequencyText">Interval Frequency in minutes</span> 
									<input id="macro_BreakFrequencyRange" spanID="macro_BreakFrequencyRangeValue" type="range" min="20" max="120" value="60" step="5"></input> 
									<span id="macro_BreakFrequencyRangeValue">60</span>
								</div>
							</section>
					</div>
					<div id="other_OptionsSettingsPage" class="page hidden">
						<h1 i18n-content="browserPage">Other Options</h1>
					</div>
				</div>
			</div>

		</div>
	</div>
</body>

</html>